<template>
  <el-breadcrumb separator-class="el-icon-arrow-right" class="bc_container">
    <el-breadcrumb-item v-for="item in breadcrumb" :key="item">{{item}}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
  export default {
    data () {
      return {
        breadcrumb: []
      }
    },
    computed: {
      menuList: {
        get () { return this.$store.state.common.menuList },
        set (val) {
          this.$store.commit('common/updateMenuList', val)
        }
      }
    },
    watch: {
      $route: {

        handler: 'routeHandle',
        immediate: true
        }
    },
    created () {
      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      this.routeHandle(this.$route)
    },
    methods: {
      // 路由操作
      routeHandle (route) {

        let i18nkey = route.meta.i18nkey

        let breadcrumb = this.$t(i18nkey).breadcrumb
        if (breadcrumb && breadcrumb instanceof Array && breadcrumb.length > 0) {
          this.breadcrumb = breadcrumb
        } else {
          this.breadcrumb = []
        }
      }
    }
  }
</script>


<style lang="scss" scoped>
    .bc_container {
        margin-bottom: 15px;
    }

</style>
